<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../layuiadmin/layui/css/admin.css" media="all">
    <link rel="stylesheet" href="../../css/custom.css" media="all">
    <script src="../../js/echarts.min.5.2.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="layui-row">
        <div class="layui-col-lg6 layui-col-md8 layui-col-sm9 layui-col-xs12">
            <div class="layui-card">
                <div class="layui-card-header">
                    <div class="my-header">散点图2</div>
                    <div>少系列</div>
                </div>
                <div class="layui-card-body">
                    <div id="myEchartsDiv" style="width: 100%; height: 200px;"></div>
                </div>
            </div>
        </div>
    </div>

    <script>
        var chartDom = document.getElementById('myEchartsDiv');
        var myChart = echarts.init(chartDom);

        var ydata = ["Resilience", "Community Support", "Professional Identity"];
        let colorList = ["#02cc68", "#9a60b4", "#829AA0", "#D4EB7A", "#73ACDF", "#C7B79E", "#f55018", "#E61A94"];
        let sers = [];
        let legendName = [];

        let bubbleChartData = [
            {
                "Categorys": "Austin",
                "model": [["Resilience", 73.62, 174], ["Community Support", 82.73, 207], ["Professional Identity", 88.97, 174]]
            },
            {
                "Categorys": "Dublin",
                "model": [["Resilience", 70.1, 170], ["Community Support", 79.8, 191], ["Professional Identity", 89.69, 169]]
            },
            // {
            //     "Categorys": "Kuala Lumpur",
            //     "model": [["Resilience", 72.6, 739], ["Community Support", 76.63, 746], ["Professional Identity", 80.33, 723]]
            // },
            // {
            //     "Categorys": "Lisbon",
            //     "model": [["Resilience", 69.39, 765], ["Community Support", 77.95, 825], ["Professional Identity", 88.59, 751]]
            // },
            // {
            //     "Categorys": "Manila",
            //     "model": [["Resilience", 85.97, 1696], ["Community Support", 90.98, 1720], ["Professional Identity", 93.83, 1646]]
            // },
            // {
            //     "Categorys": "Mountain View",
            //     "model": [["Resilience", 77.98, 137], ["Community Support", 86.85, 151], ["Professional Identity", 91.92, 140]]
            // },
            {
                "Categorys": "Mumbai",
                "model": [["Resilience", 81.8, 1336], ["Community Support", 83.65, 1366], ["Professional Identity", 87.55, 1294]]
            },
            {
                "Categorys": "Warsaw",
                "model": [["Resilience", 68.2, 242], ["Community Support", 78.17, 258], ["Professional Identity", 84.14, 196]]
            }]

        for (var i = 0; i < bubbleChartData.length; i++) {
            sers.push({
                name: bubbleChartData[i].Categorys,
                symbolSize: 25,
                data: bubbleChartData[i].model,
                type: "scatter",
                itemStyle: {
                    normal: {
                        color: colorList[i],
                        borderColor: "#555",
                        opacity: 0.6,
                    },
                },
            });
            legendName.push(bubbleChartData[i].Categorys);
        }
        let option = null;
        option = {
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    return params.seriesName + '<br>' + params.data[0] + ': ' + params.data[1] + '<br>Respondents: ' + params.data[2];
                },
                backgroundColor: '#fff',
                borderRadius: 2,
                textStyle: {
                    fontFamily: "Graphik",
                    color: '#000',
                    fontSize: 12
                }
            },
            legend: {
                data: legendName,
                top: "center",
                right: 8,
                orient: "vertical",
                formatter: function (name) {
                    if (!name) return '';
                    if (name.length > 20) {
                        return name.slice(0, 16) + '...';
                    } else {
                        return name;
                    }
                },
                tooltip: {
                    show: true
                }
            },
            grid: {
                top: "14%",
                left: 35,
                bottom: "2%",
                right: 190,
                containLabel: true,
            },
            xAxis: [
                {
                    type: "category",
                    boundaryGap: false,
                    data: ydata,
                    axisLabel: {
                        margin: 11
                    }
                },
            ],
            yAxis: [
                {
                    scale: true,
                    type: "value",
                    axisLabel: {
                        margin: 25
                    },
                    axisTick: {
                        show: false,
                    },
                },
            ],
            series: sers,
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    </script>

    <script src="../../js/tool.js"></script>
    <script>
        init()
    </script>
</body>

</html>